<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .con {
            width: 800px;
            height: 600px;
            border: 1px solid red;
        }

        .con .con_1 {
            border: 1px solid blue;
            position: relative;
            width: 220px;
            height: 133px;
            overflow: hidden;
            float: left;
        }

        .con .wh {
            width: 332px;
        }

        .con .con_1 img,
        .con .con_1 .con_txt {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: 1s;
        }

        .con .con_1 .con_txt {
            opacity: 0;
            /* background: rgba(1, 1, 1, 0); */
            background: rgba(1, 1, 1, 0.5);
            color: #fff;
            font-size: 20px;
        }

        .con .con_1:hover .con_txt {
            opacity: 1;
        }

        .con .con_1:hover img {
            transform: scale(1.2) skew(15deg);
        }

        /* 放大镜效果 */
        .con .con_1 .con_txt div {
            width: 32px;
            height: 34px;
            background: url(./img/zoomico.png) no-repeat;
            margin: 30px auto;
            transition: 1s;
        }

        .con .con_1 .con_txt div:hover {
            background-position: 0 -30px;
        }
    </style>
</head>

<body>
    <!-- alt 图片出错的时候会显示文字，
                alt可以增加seo优化
    seo：搜索引擎优化
    前端需要了解的seo的知识：
    1.图片对seo不友好，seo对图片不敏感，图片可以使用 alt属性
    2.seo对音视频、flash不敏感，音视频在网页中越少越好
    3.可以设置title、keywords、descreption 
    4.div标签嵌套的层级越少越少，因为seo算法，深度  4-6 层
    5.页面深度尽量控制在3层以内，有利于seo
    6.建议使用 语义化标签，seo可以解析语义化标签
    7.建议 html css js 分开不同的文件写，缩短 html的长度
    8.建议后台代码，静态化或者伪静态化
    -->

    <div class="con">
        <div class="con_1">
            <img src="./img/worksimg1.jpg" alt="图片一" />
            <div class="con_txt">asdxfcgvhj
                <div></div>
            </div>
        </div>
        <div class="con_1 wh">
            <img src="./img/worksimg4.jpg" alt="图片一" />
            <div class="con_txt">asdxfcgvhj
                <div></div>
            </div>
        </div>
    </div>
</body>

</html>